<template>
  <div class="mineBox">
    <!-- bannerVIP -->
    <div class="topBanner">
      <div class="navBox noVip">
        <div class="navTitle">我的易购</div>
        <router-link to="" class="setting">
          <img src="../assets/images/setting.png" alt />
        </router-link>
      </div>
      <div class="userBox flex">
        <router-link to="personalSet" class="userLogo">
          <img src="../assets/images/0000000000_01.jpg" alt class="userImg" />
        </router-link>
        <div class="userMiddle">
          <div class="phone">185******12</div>
          <router-link to class="upPower">升级权益</router-link>
        </div>
        <router-link to="vipQRCode" class="myQRCode">
          <img src="../assets/images/qr-icon.png" alt />
        </router-link>
      </div>
      <!-- 钱包 -->
      <div class="userMoney flex">
        <router-link to="myCoupon" class="moneyItem">
          <b>{{user.coupon}}</b>
          <div>优惠券</div>
        </router-link>
        <router-link to class="moneyItem">
          <b>{{user.diamond}}</b>
          <div>领云钻</div>
        </router-link>
        <router-link to="footprint" class="moneyItem">
          <b>{{user.footprint}}</b>
          <div>足迹</div>
        </router-link>
        <router-link to="attention" class="moneyItem">
          <b>{{user.attention}}</b>
          <div>关注</div>
        </router-link>
      </div>
      <router-link to class="userVip flex">
        <img src="../assets/images/vip.png" alt />
        <div class="text">【免费】您可领一张运费券</div>
        <div class="go flex">
          <p>立即领取</p>
          <x-icon type="ios-arrow-right" size="20" style="fill:#BBB;"></x-icon>
        </div>
      </router-link>
    </div>
    <!-- 我的订单 -->
    <div class="orderBox">
      <router-link :to="{name:'myOrder',query:{tab:'all'}}" class="myOrder flex_sb">
        <p>我的订单</p>
        <div class="text flex">
          <div>查看更多</div>
          <img src="../assets/images/next.png" alt />
        </div>
      </router-link>
      <div class="orderList flex">
        <router-link :to="{name:'myOrder',query:{tab:'zf'}}" class="listItem">
          <img src="../assets/images/order-icon01.png" alt />
          <div>待支付</div>
        </router-link>
        <router-link :to="{name:'myOrder',query:{tab:'sh'}}" class="listItem">
          <img src="../assets/images/order-icon02.png" alt />
          <div>待收货</div>
          <div class="news">3</div>
        </router-link>
        <router-link to class="listItem">
          <img src="../assets/images/order-icon03.png" alt />
          <div>评价有礼</div>
        </router-link>
        <router-link to="afterSales" class="listItem">
          <img src="../assets/images/order-icon04.png" alt />
          <div>退换/售后</div>
        </router-link>
        <router-link to="keepList" class="listItem">
          <img src="../assets/images/order-icon05.png" alt />
          <div>常购清单</div>
        </router-link>
      </div>
    </div>
    <!-- 必备工具 -->
    <div class="toolBox">
      <p>必备工具</p>
      <div class="toolList clearfix">
        <router-link to="redEnvelope" class="listItem">
          <img src="../assets/images/157250874743127029.png" alt />
          <div>红包</div>
        </router-link>
        <router-link to class="listItem">
          <img src="../assets/images/157250876042530564.png" alt />
          <div>店铺关注</div>
        </router-link>
        <router-link to class="listItem">
          <img src="../assets/images/157250878626080332.png" alt />
          <div>足迹</div>
        </router-link>
        <router-link to class="listItem">
          <img src="../assets/images/157136450994431031.png" alt />
          <div>客户服务</div>
        </router-link>
        <router-link to class="listItem">
          <img src="../assets/images/157251063564774447.png" alt />
          <div>必抢清单</div>
        </router-link>
        <router-link to class="listItem">
          <img src="../assets/images/157136454213083878.png" alt />
          <div>拼购</div>
        </router-link>
        <router-link to class="listItem">
          <img src="../assets/images/157251073785756292.png" alt />
          <div>校园VIP</div>
        </router-link>
        <router-link to class="listItem">
          <img src="../assets/images/157136448419617333.png" alt />
          <div>我的试用</div>
        </router-link>
      </div>
    </div>
    <!-- 好货推荐 -->
    <div class="recomend flex_center">
      <img src="../assets/images/guessTitle-icon.png" alt class="leftImg" />
      <span>好货推荐</span>
      <img src="../assets/images/guessTitle-icon2.png" alt class="rightImg" />
    </div>
    <div class="like">
      <ul class="likeUl clearfix">
        <li v-for="(item,index) in likeList" :key="index">
          <router-link class="linkBox" to="goodsInfo">
            <img :src="item.img" alt />
            <div class="content">
              <div class="title">{{item.title}}</div>
              <div class="tag flex">
                <div
                  class="tagItem"
                  :class="item2=='自营'?'zy':''"
                  v-for="(item2,index2) in item.tags"
                  :key="index2"
                >{{item2}}</div>
              </div>
              <div class="footer flex">
                <div class="money">￥{{item.money}}</div>
                <div class="evaluate">{{item.evaluate}}+评论</div>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <divider style="padding: 20px;">我也是有底线的</divider>
    <TabBar></TabBar>
  </div>
</template>

<script>
import { Divider } from 'vux'
import TabBar from "../components/tabBar";
export default {
  components: {
    Divider,
    TabBar,
  },
  data() {
    return {
      user: {
        coupon: '12',
        diamond: '212',
        footprint: '20',
        attention: '11',
      },
      likeList: [
        {
          img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png'),
          title: '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
          tags: ['自营', '大聚惠'],
          money: '1548',
          evaluate: '100'
        },
        {
          img: require('../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png'),
          title: '飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒',
          tags: ['领券39-10',],
          money: '1499',
          evaluate: '100'
        },
        {
          img: require('../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png'),
          title: '飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒',
          tags: ['领券39-10',],
          money: '1499',
          evaluate: '100'
        },
        {
          img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png'),
          title: '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
          tags: ['自营', '大聚惠'],
          money: '1548',
          evaluate: '100'
        },
      ]
    }
  },
  mounted() {
    window.scrollTo(0, 0)
    document.querySelector('body').setAttribute('style', 'background-color:#eee')
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },

}
</script>

<style lang="less" scoped>
.mineBox {
  padding-bottom: 100px;
  // font-size: 24px;
  .topBanner {
    width: 100%;
    height: 410px;
    background: #ffdb47;
    position: relative;
    .navBox {
      height: 50px;
      padding-top: 20px;
      text-align: center;
      position: relative;
      .navTitle {
        color: #000;
        font-size: 36px;
        font-weight: bold;
      }
      .setting {
        display: block;
        width: 40px;
        height: 40px;
        position: absolute;
        right: 30px;
        top: 30px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .userBox {
      padding: 50px 30px 0;
      .userLogo {
        width: 120px;
        height: 120px;
        display: block;
        .userImg {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .userMiddle {
        margin-left: 20px;
        height: 120px;
        .phone {
          font-weight: bold;
          font-size: 28px;
          margin-top: 10px;
          margin-bottom: 20px;
        }
        .upPower {
          background: #e1bb23;
          color: #fff;
          font-size: 24px;
          border-radius: 10px;
          padding: 4px 10px;
        }
      }

      .myQRCode {
        margin-left: auto;
        img {
          width: 120px;
          height: 120px;
        }
      }
    }
    .userMoney {
      margin-top: 10px;

      .moneyItem {
        width: 25%;
        padding: 20px 0;
        text-align: center;
        font-size: 28px;
        color: currentColor;
      }
    }
    .userVip {
      margin: 20px;
      padding: 10px 20px;
      border-radius: 20px;
      background-color: #fff;
      margin-top: -10px;
      img {
        width: 100px;
        height: 60px;
      }
      .text {
        margin-left: 20px;
        font-size: 28px;
      }
      .go {
        margin-left: auto;
      }
    }
  }
  // 我的订单
  .orderBox {
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    margin: 20px;
    margin-top: 70px;
    .myOrder {
    color: currentColor;

      p {
        font-weight: bold;
        font-size: 30px;
      }
      .text {
        margin-left: auto;
        color: #666;
        img {
          width: 30px;
          height: 30px;
          margin-left: 10px;
        }
      }
    }
    .orderList {
      text-align: center;
      .listItem {
        width: 20%;
        padding: 20px 0;
        position: relative;
        img {
          width: 50%;
        }
        div {
          color: #666;
        }
        .news {
          position: absolute;
          top: 10px;
          right: 10px;
          background-color: rgb(245, 44, 44);
          padding: 0px 12px;
          color: #fff;
          border-radius: 50%;
        }
      }
    }
  }
  // 必备工具
  .toolBox {
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    margin: 20px;
    p {
      font-weight: bold;
      font-size: 30px;
    }
    .toolList {
      text-align: center;
      .listItem {
        width: 25%;
        float: left;
        padding: 20px 0;
        position: relative;
        img {
          width: 30%;
        }
        div {
          color: #666;
        }
      }
    }
  }
  // 好货推荐
  .recomend {
    text-align: center;
    img {
      width: 50px;
      height: 12px;
      padding-bottom: 6px;
    }
    .rightImg {
      transform: rotateY(180deg);
    }
    span {
      font-weight: bold;
      font-size: 30px;
      margin: 0 10px;
    }
  }
  .like {
    .likeUl {
      list-style: none;
      padding: 20px;
      li {
        float: left;
        width: 49%;
        border-radius: 20px;
        margin-right: 2%;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding: 20px;
        background-color: #fff;
        
        .linkBox{color: currentColor;}
        img {
          width: 100%;
        }
        .content {
          .title {
            margin: 10px auto 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
          }
          .tag {
            margin: 10px 0;
            .tagItem {
              border: 2px solid #fb0;
              padding: 0 5px;
              border-radius: 10px;
              margin: 0 10px;
            }
            .zy {
              background-color: #fb0;
            }
          }
          .footer {
            .money {
              color: #f42;
              font-weight: bold;
              font-size: 30px;
            }
            .evaluate {
              color: #999;
              margin-left: 20px;
              font-size: 28px;
            }
          }
        }
      }
      li:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
}
</style>